<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借阅记录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .fixed-controls {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: white;
            z-index: 10;
            padding: 10px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .table-container {
            margin-top: 100px; /* 根据固定控件的高度 */
            padding-bottom: 10px;
            max-height: calc(100vh - 100px); /* 限制容器的最大高度 */
            overflow-y: unset; /* 禁用滚动 */
        }
        .pagination {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
            z-index: 10;
            padding: 10px 0;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .el-table th {
            position: sticky;
            top: 0; /* 固定在顶部 */
            background-color: #f5f7fa; /* 设置背景色 */
            z-index: 1; /* 确保表头层级高于内容 */
        }
    </style>
</head>
<body>
<div id="app">
    <div class="fixed-controls">
        <el-input v-model="searchName" placeholder="请输入借阅人" style="width: 200px; margin-bottom: 20px;"></el-input>
        <el-input v-model="searchTitle" placeholder="请输入图书名" style="width: 200px; margin-bottom: 20px;"></el-input>
        <el-input v-model="searchCopyId" placeholder="请输入复本编号" style="width: 200px; margin-bottom: 20px;"></el-input>
        <el-input v-model="searchMinBorrowDays" placeholder="最小借阅天数" style="width: 200px; margin-bottom: 20px;"></el-input>
        <el-input v-model="searchMaxBorrowDays" placeholder="最大借阅天数" style="width: 200px; margin-bottom: 20px;"></el-input>

        <el-select v-model="sortField" placeholder="选择排序字段" style="width: 200px; margin-bottom: 20px;">
            <el-option label="按复本编号排序" value="copyId"></el-option>
            <el-option label="按借阅人排序" value="name"></el-option>
            <el-option label="按图书名排序" value="title"></el-option>
            <el-option label="按借出日期排序" value="borrowData"></el-option>
            <el-option label="按应还日期排序" value="dueDate"></el-option>
        </el-select>

        <el-switch v-model="isAsc" active-text="升序" inactive-text="降序" style="margin-bottom: 20px;"></el-switch>

        <el-button type="primary" @click="fetchData">搜索</el-button>
    </div>

    <div class="table-container">
        <el-table :data="borrowRecords" stripe height="650">
            <el-table-column prop="copyId" label="复本编号"></el-table-column>
            <el-table-column prop="name" label="借阅人"></el-table-column>
            <el-table-column prop="title" label="图书名"></el-table-column>
            <el-table-column prop="borrowData" label="借出日期"></el-table-column>
            <el-table-column prop="dueDate" label="应还日期"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="returnBook(scope.row.copyId)">归还</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="pagination">
        <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                borrowRecords: [],
                total: 0,
                pageSize: 10,
                currentPage: 1,
                searchName: '',
                searchTitle: '',
                searchCopyId: '',
                searchMinBorrowDays: '',
                searchMaxBorrowDays: '',
                sortField: '',
                isAsc: true
            }
        },
        mounted() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                const params = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                };

                if (this.searchName) params.name = this.searchName;
                if (this.searchTitle) params.title = this.searchTitle;
                if (this.searchCopyId) params.copyId = this.searchCopyId;
                if (this.searchMinBorrowDays) params.minBorrowDays = this.searchMinBorrowDays;
                if (this.searchMaxBorrowDays) params.maxBorrowDays = this.searchMaxBorrowDays;
                if (this.sortField) params.sortBy = this.sortField;
                params.isAsc = this.isAsc;

                axios.get(`http://localhost:8091/borrowRecords/page`, { params })
                    .then(response => {
                        if (response.data && response.data.data) {
                            this.borrowRecords = response.data.data.list;
                            this.total = response.data.data.total;
                        }
                    })
                    .catch(error => {
                        console.error("Error fetching data: ", error);
                    });
            },
            returnBook(copyId) {
                axios.put(`http://localhost:8091/borrowRecords`, null, {
                    params: { copyId: copyId }
                })
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success("归还成功");
                            this.fetchData(); // 刷新数据
                        } else {
                            this.$message.error(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error("Error returning book: ", error);
                        this.$message.error("归还失败");
                    });
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.fetchData();
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.fetchData();
            }
        }
    });
</script>
</body>
</html>
